<template>
    <div v-if="pageflag" class="page-warp">
        <Echart id="leftCenter" :options="options" isClick class="left_center_inner" ref="charts" height="300px" />
    </div>
    <Reacquire v-else @onclick="getData" style="line-height: 300px">
        重新获取
    </Reacquire>
</template>

<script>
import { currentPOST } from 'api/modules';
import { colorsA, colorsB, legend, xAxis, yAxis } from '@/config/EChartVar';
import { graphic } from 'echarts';

export default {
    data() {
        return {
            options: {},
            countUserNumData: {
                axisData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                seriesData0: [4635, 4621, 4781, 4521, 4581, 4121, 4781, 4621, 4639, 4221, 4581],
                seriesData1: [2361, 3327, 2419, 2301, 2263, 3121, 2380, 3371, 2318, 1241, 2291],
                seriesData2: [7198, 6911, 7062, 6161, 7103, 6231, 6839, 5371, 6971, 6341, 6853],
            },
            pageflag: true,
            timer: null,
        };
    },
    created() {
        this.getData();
    },
    mounted() { },
    beforeDestroy() {
        this.clearData();
    },
    methods: {
        clearData() {
            if (this.timer) {
                clearInterval(this.timer);
                this.timer = null;
            }
        },
        getData() {
            this.pageflag = true;
            this.init(this.countUserNumData);
        },
        //轮询
        switper() {
            if (this.timer) {
                return;
            }
            let looper = (a) => {
                this.getData();
            };
            this.timer = setInterval(
                looper,
                2000 // this.$store.state.setting.echartsAutoTime // staticAutoTime
            );
            let myChart = this.$refs.charts.chart;
            myChart.on('mouseover', (params) => {
                this.clearData();
            });
            myChart.on('mouseout', (params) => {
                this.timer = setInterval(
                    looper,
                    2000 // this.$store.state.setting.echartsAutoTime // staticAutoTime
                );
            });
        },
        init(currentData) {
            let axisData = currentData.axisData;
            let seriesData = [
                [...currentData.seriesData0],
                [...currentData.seriesData1],
                [...currentData.seriesData2],
            ];

            const options = {
                grid: {
                    top: '17%',
                    left: '4%',
                    right: '6%',
                    bottom: '16%',
                    containLabel: true,
                },
                legend: {
                    show: true,
                    top: '10px',
                    right: '10%',
                    icon: 'circle',
                    itemWidth: 8,
                    itemHeight: 8,
                    // itemGap: 60,
                    textStyle: legend.textStyle,
                    data: ['票数', '重量', '运费'],
                },
                xAxis: {
                    type: 'category',
                    data: axisData,
                    boundaryGap: true,
                    splitLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false, // 不显示下切线
                    },
                    axisLabel: xAxis.axisLabel,
                    axisLine: {
                        lineStyle: {
                            background: 'rgba(176, 215, 255, 0.4)',
                        },
                    },
                },
                yAxis: [
                    {
                        type: 'value',
                        // max: 400,
                        // min: 100,//
                        // interval: 100,
                        axisLabel: yAxis.axisLabel,
                        axisLine: {
                            show: false,
                            // interval: 1,
                            lineStyle: {
                                color: 'rgba(0,0,0,0.5)',
                            },
                        },
                        splitLine: {
                            show: true,
                            // interval: 1,
                            lineStyle: {
                                color: ['rgba(176, 215, 255, 0.2)'],
                                width: 1,
                                type: 'dashed',
                            },
                        },
                        // splitLine: {
                        //   show: false,
                        // },
                        axisTick: {
                            show: false,
                        },
                    },
                ],
                series: [],
            };
            const series = [
                {
                    name: '票数',
                    type: 'line',
                    // 动画配置
                    animation: true,
                    animationDuration: 2000,
                    animationEasing: 'quarticInOut',
                    animationDelay: function (idx) {
                        return idx * 150;
                    },
                    smooth: false,
                    showSymbol: false,
                    data: seriesData[0],
                    itemStyle: {
                        normal: {
                            // color: "#5defff",
                            color: 'rgba(93, 239, 255, .7)',
                            borderRadius: [5, 5, 5, 5]
                        }
                    },
                    // areaStyle: {
                    //     // color: colorsB[0],
                    //     color: {
                    //         type: "linear",
                    //         x: 0,
                    //         y: 0,
                    //         x2: 0,
                    //         y2: 1,
                    //         colorStops: [
                    //             {
                    //                 offset: 0,
                    //                 color: "rgba(93, 239, 255,1)",
                    //             },
                    //             {
                    //                 offset: 1,
                    //                 color: "rgba(93, 239, 255,0.2)",
                    //             },
                    //         ],
                    //         globalCoord: false,
                    //     }
                    // },
                    lineStyle: {
                        normal: {
                            width: 3,
                        },
                    }
                },
                {
                    name: '重量',
                    type: 'line',
                    // 动画配置
                    animation: true,
                    animationDuration: 2000,
                    animationEasing: 'quarticInOut',
                    animationDelay: function (idx) {
                        return idx * 150;
                    },
                    smooth: false,
                    showSymbol: false,
                    data: seriesData[1],
                    itemStyle: {
                        normal: {
                            color: "#D83D6C",
                            // color: 'rgba(0,219,254, .7)',
                        },
                    },
                    // areaStyle: {
                    //     // color: colorsB[0],
                    //     color: {
                    //         type: "linear",
                    //         x: 0,
                    //         y: 0,
                    //         x2: 0,
                    //         y2: 1,
                    //         colorStops: [
                    //             {
                    //                 offset: 0,
                    //                 color: "rgba(216,61,108,1)",
                    //             },
                    //             {
                    //                 offset: 1,
                    //                 color: "rgba(216,61,108,0.2)",
                    //             },
                    //         ],
                    //         globalCoord: false,
                    //     }
                    // },
                    lineStyle: {
                        normal: {
                            width: 3,
                        },
                    }
                },
                {
                    name: '运费',
                    type: 'line',
                    // 动画配置
                    animation: true,
                    animationDuration: 2000,
                    animationEasing: 'quarticInOut',
                    animationDelay: function (idx) {
                        return idx * 150;
                    },
                    smooth: false,
                    showSymbol: false,
                    data: seriesData[2],
                    itemStyle: {
                        normal: {
                            color: '#1890FF',
                            // color: 'rgba(0,219,254, .7)',
                        },
                    },
                    // areaStyle: {
                    //     // color: colorsB[1],
                    //     color: {
                    //         type: "linear",
                    //         x: 0,
                    //         y: 0,
                    //         x2: 0,
                    //         y2: 1,
                    //         colorStops: [
                    //             {
                    //                 offset: 0,
                    //                 color: "rgba(24, 144, 255,1)",
                    //             },
                    //             {
                    //                 offset: 1,
                    //                 color: "rgba(24, 144, 255,0.2)",
                    //             },
                    //         ],
                    //         globalCoord: false,
                    //     }
                    // },
                    lineStyle: {
                        normal: {
                            width: 3,
                        },
                    }
                }
            ];
            options.series = series;
            this.options = options;
        },
    },
};
</script>
<style lang="scss" scoped>
.page-warp {
    position: relative;

    #leftCenter {
        z-index: 990;
    }
}
</style>